<template>
	<view class="buy">
		<view class="t3">
			<view class="t4">
				{{detail.title}}
			</view>
			<view class="t5" @click="goTo('/pages/home/selectSelfLifting?store='+JSON.stringify(store))">
				<view>
					<image :src="imgUrl+'shop@2x.png'" mode="widthFix"></image>
				</view>
				<view>
					{{store.storeName}}
				</view>
			</view>

		</view>
		<view class="t6">
			<image :src="imgUrl+'9.png'" mode="widthFix"></image>
		</view>
		<view class="t7">
			￥{{goodsList[index2].costPrice}} <text>¥ {{goodsList[index2].price}}</text>
		</view>
		<view class="t8" v-for="(item,idx) in salePropertyList">
			<view>{{item.propertyName}}</view>
			<view class="t9">
				<view v-for="(iteam,idx2) in item.itemList" :key="idx" @click="tabFn(idx,idx2)"
					:class="{'active':item.active==idx2}">{{iteam.propertyValue}}
				</view>
			</view>
		</view>
		<view class="t10">
			<view>提货方式</view>
			<view>自提 <image :src="imgUrl+'back@2x.png'" mode="widthFix"></image>
			</view>
		</view>
		<view class="t10" @click="showMask">
			<view>提货时间</view>
			<view>{{dateRange||'选择提货时间'}}
				<image :src="imgUrl+'back@2x.png'" mode="widthFix"></image>
			</view>
		</view>
		<view class="t10">
			<view>数量</view>
			<view class="t11">
				<image @click="num<=1?'':num--" :src="imgUrl+'16.png'" mode="widthFix"></image>
				<text>{{num}}</text>
				<image @click="num++" :src="imgUrl+'17.png'" mode="widthFix"></image>

			</view>
		</view>
		<view class="btn" :class="{'gray':buyStatus!=1}" @click="!dateRange?showMask():pushOrder()">
			{{buyText}}
		</view>
		<hTimeAlert v-if="isShow" title="选择时间" subhead="" rangeStartTime="10:00:00" rangeEndTime="20:00:00"
			defaultTime="2020/3/29 18:00:00" intervalTime="30" dayStartIntTime="0" rangeDay="7" :isShow="isShow"
		 :maskHide="maskHide" :rangeType="rangeType" :closeBtn="closeBtn" @closeAlert="handelClose"></hTimeAlert>
	</view>
</template>

<script>
	import hTimeAlert from "@/components/h-time-alert/h-time-alert.vue";

	export default {
		components: {
			hTimeAlert
		},
		props: ['detail', 'store'],
		data() {
			return {
				isShow: false,
				dateRange: "",
				maskHide: true,
				closeBtn: true,
				rangeType: true,
				imgUrl: this.imgUrl,
				resData: "",
				salePropertyList: [],
				goodsList:[],
				index1:0,
				index2:0,
				num: 1,
				list: [{
						name: '6英寸',
						id: 1
					},
					{
						name: '16英寸',
						id: 2
					},
					{
						name: '166英寸6英寸6英寸6英寸',
						id: 3
					},
					{
						name: '166英寸6英寸',
						id: 4
					}
				],
				takeTime:"",
				buyText:"立即购买",
				buyStatus:1,
			}
		},
		onLoad() {

		},
		mounted() {
			this.resData = this.detail
			this.salePropertyList = this.detail.salePropertyList
			console.log(this.salePropertyList)
			this.goodsList = this.detail.goodsList;
			
			this.checkGoodsStatus(this.index2)

		},
		methods: {
			pushOrder() {
				if(this.buyStatus!=1){
					return
				}
				var self=this;
				var goodsBaseId =  self.detail.goodsList[self.index2].goodsBaseId
				var goodsRelationId =  self.detail.goodsList[self.index2].relationId
				var price =  self.detail.goodsList[self.index2].price
				var costPrice =  self.detail.goodsList[self.index2].costPrice
				// this.salePropertyList.forEach(function(e, idx) {
				// 	if (e.active) {
				// 		idx=e.active
				// 	}
				// })
				
				this.goTo('/pages/home/placeOrder?count=' + this.num + '&goodsBaseId=' + goodsBaseId + '&storeRelationId=' +
					this.detail.storeRelationId + '&goodsRelationId=' + goodsRelationId+ '&storeId=' + this.store.storeId+'&takeTime=' + this.takeTime+'&price=' + price+'&costPrice=' + costPrice)
			},
			showMask() {
				this.isShow = true;
				console.log(this.isShow);
			},

			handelClose(data) {
				this.isShow = false;
				this.dateRange = data.dateRange
				this.takeTime = data.date +":00"
				console.log(data); //data={
				//  date: "2020/3/30 09:00"
				//  _date: "2020-3-30 09:00"
				//  dateRange: "2020/3/30 09:00-09:30"
				//  _dateRange: "2020-3-30 09:00-09:30"
				//  timeStamp: 1585530000000
				// }
			},
			tabFn(idx, idx2) {
				this.index1=idx
				this.index2=idx2
				this.salePropertyList[idx].active = idx2
				this.idx2 = idx2
				this.checkGoodsStatus(idx2)
				this.$emit('idxFn', idx2)

			},
			checkGoodsStatus(idx2){
				if(this.goodsList[idx2].status==0){
					this.buyText = "已下架"
					this.buyStatus = 2
				}else if(this.goodsList[idx2].stockQuentity==0){
					this.buyText = "已售罄"
					this.buyStatus = 3
				}else if(this.goodsList[idx2].status==1&&this.goodsList[idx2].stockQuentity>0){
					this.buyText = "立即购买"
					this.buyStatus = 1
				}
				this.$emit('buyTextFn',this.buyText)
			}

		}
	}
</script>

<style scoped lang="scss">
	.buy {
		width: 100%;
		min-height: 740upx;
		background: #FFFFFF;
		padding: 24upx 28upx;
		border-radius: 20upx 20upx 0px 0px;


		.t3 {
			display: flex;
			justify-content: space-between;

			.t4 {
				font-size: 36upx;
				font-weight: 400;
				color: #222222;
			}

			.t5 {
				font-size: 26upx;
				font-weight: 400;
				color: #888888;
				text-align: center;
				position: absolute;
				right: 30upx;
				top: 45upx;

				image {
					width: 38upx;
					height: 38upx;
					margin-bottom: 6upx;
				}
			}


		}

		.t6 {
			margin-top: 16upx;

			image {
				width: 56upx;
				height: 27upx;
			}
		}

		.t7 {
			font-size: 32upx;
			font-weight: 400;
			margin-top: 6upx;
			color: #222222;

			text {
				font-size: 20upx;
				font-weight: 400;
				color: #888888;
				margin-left: 10upx;
			}
		}

		.t8 {
			font-size: 26upx;
			font-weight: 400;
			color: #888888;
			margin-top: 10upx;

			>view:nth-child(1) {
				font-size: 26upx;
				margin-top: 36upx;
				margin-bottom: 6upx;
				font-weight: 400;
				color: #888888;
			}

			.t9 {
				>view {
					background: rgba(242, 242, 242, .59);
					padding: 8upx 30upx;
					margin-right: 20upx;
					font-size: 26upx;
					display: inline-block;
					font-weight: 400;
					margin-top: 20upx;
					color: #222222;
					border-radius: 20upx;
				}

				.disAactive {
					background: rgba(238, 238, 238, 0.59);
					font-weight: 400;
					color: #CCCCCC;
				}

				.active {
					color: #FFFFFF;
					background: #BFB49B;
				}
			}
		}

		.t10 {
			display: flex;
			align-items: center;
			justify-content: space-between;
			margin-top: 44upx;

			>view:nth-child(1) {
				font-size: 26upx;
				font-weight: 400;
				color: #888888;
			}

			>view:nth-child(2) {
				font-size: 26upx;
				font-weight: 400;
				color: #BFB49B;
				display: flex;
				align-items: center;

				image {
					width: 20upx;
					height: 20upx;
					margin-left: 10upx;
					margin-top: 4upx;
				}
			}

			.t11 {
				image {
					width: 40upx !important;
					height: 40upx !important;
				}

				text {
					font-size: 28upx;
					font-weight: 400;
					margin: 0 30upx;
					color: #222222 !important;
				}
			}
		}

		.btn {
			width: 100%;
			height: 80upx;
			line-height: 80upx;
			background: linear-gradient(270deg, #01AD65 0%, #01AD65 65%, #01AD65 100%);
			border-radius: 100upx;
			font-size: 32upx;
			font-weight: 400;
			color: #F8F7F7;
			margin: 60upx auto 0;
		}
		.gray{
			background: #CCCCCC;
		}
	}
</style>
